'use client';

import * as React from 'react';
import { TrendingUp } from 'lucide-react';
import { Label, Pie, PieChart } from 'recharts';

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle
} from '@/components/ui/card';
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent
} from '@/components/ui/chart';

// 更新数据结构
const chartData = [
  { 
    type: 'work', 
    count: 28, 
    fill: 'var(--color-chrome)', 
    label: '工作任务',
    description: '日常工作相关的任务'
  },
  { 
    type: 'study', 
    count: 20, 
    fill: 'var(--color-safari)', 
    label: '学习笔记',
    description: '技术学习和读书笔记'
  },
  { 
    type: 'blog', 
    count: 15, 
    fill: 'var(--color-firefox)', 
    label: '博客文章',
    description: '技术博客和心得分享'
  },
  { 
    type: 'life', 
    count: 17, 
    fill: 'var(--color-edge)', 
    label: '生活记录',
    description: '日常生活和兴趣爱好'
  }
];

const chartConfig = {
  count: {
    label: '任务数量'
  },
  work: {
    label: '工作任务',
    color: 'hsl(var(--chart-1))'
  },
  study: {
    label: '学习笔记',
    color: 'hsl(var(--chart-2))'
  },
  blog: {
    label: '博客文章',
    color: 'hsl(var(--chart-3))'
  },
  life: {
    label: '生活记录',
    color: 'hsl(var(--chart-4))'
  }
} satisfies ChartConfig;

export function PieGraph() {
  const totalCount = React.useMemo(() => {
    return chartData.reduce((acc, curr) => acc + curr.count, 0);
  }, []);

  const completedCount = React.useMemo(() => {
    // 假设工作任务和学习笔记的完成数
    return chartData
      .filter(item => ['work', 'study'].includes(item.type))
      .reduce((acc, curr) => acc + curr.count, 0);
  }, []);

  const completionRate = ((completedCount / totalCount) * 100).toFixed(1);

  return (
    <Card className="flex flex-col">
      <CardHeader className="items-center pb-2">
        <CardTitle>任务分布</CardTitle>
        <CardDescription>
          任务和笔记类型分布
        </CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[320px]"
        >
          <PieChart>
            <ChartTooltip
              cursor={false}
              content={
                <ChartTooltipContent 
                  formatter={(value, name, props) => {
                    const item = chartData.find(d => d.type === props.payload.type);
                    return [
                      `${value} 个任务`,
                      item?.label || '',
                      item?.description || ''
                    ];
                  }}
                />
              }
            />
            <Pie
              data={chartData}
              dataKey="count"
              nameKey="type"
              innerRadius={60}
              outerRadius={80}
              paddingAngle={2}
            >
              <Label
                content={({ viewBox }: any) => {
                  const { cx = 0, cy = 0 } = viewBox ?? {};
                  return (
                    <text
                      x={cx}
                      y={cy}
                      textAnchor="middle"
                      dominantBaseline="middle"
                    >
                      <tspan
                        x={cx}
                        y={cy - 12}
                        className="fill-foreground text-3xl font-bold"
                      >
                        {totalCount}
                      </tspan>
                      <tspan
                        x={cx}
                        y={cy + 12}
                        className="fill-muted-foreground text-sm"
                      >
                        总任务数
                      </tspan>
                      <tspan
                        x={cx}
                        y={cy + 32}
                        className="fill-muted-foreground text-xs"
                      >
                        完成率 {completionRate}%
                      </tspan>
                    </text>
                  );
                }}
              />
            </Pie>
          </PieChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col gap-2 text-sm pt-6">
        <div className="flex items-center gap-2 font-medium leading-none">
          本周任务完成率提升 2.5% <TrendingUp className="h-4 w-4" />
        </div>
        <div className="leading-none text-muted-foreground">
          数据更新于 {new Date().toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          })}
        </div>
      </CardFooter>
    </Card>
  );
}